<template>
    <div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-table :data="props.row.children" class="inner-table" :show-header="false">
                        <el-table-column label="zi商品 ID" prop="id">
                        </el-table-column>
                        <el-table-column label="商品名称" prop="name">
                        </el-table-column>
                        <el-table-column label="日期" prop="date">
                        </el-table-column>
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column label="商品 ID" prop="id">
            </el-table-column>
            <el-table-column label="商品名称" prop="name">
            </el-table-column>
            <el-table-column label="日期" prop="date">
            </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button @click.native.prevent="handleClick(scope.$index, scope.row)" type="text" size="small">
                        查看详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="文档信息" :visible.sync="formVisible" width="70%" @close="closeDialog" :close-on-click-modal="false">
            <el-form :model="form"  ref="formRef">
                <el-form-item label="id" prop="id">
                    <el-input v-model="form.id" placeholder="id"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="form.address" placeholder="地址"></el-input>
                </el-form-item>
                <el-form-item label="名称" prop="name">
                    <el-input v-model="form.name" placeholder="名称"></el-input>
                </el-form-item>
            </el-form>
            <el-button @click="addChild" type="primary">新增子项</el-button>
            <el-table :data="form.children || []">
                <el-table-column label="商品 ID" prop="id">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.id" placeholder="请输入商品ID"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="商品名称" prop="name">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.name" placeholder="请输入商品名称"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="日期" prop="date">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.date" placeholder="请输入日期"></el-input>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                        <el-button @click.native.prevent="removeChild(scope.$index)" type="text" size="small">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div slot="footer" class="dialog-footer">
                <el-button @click="formVisible = false">取消</el-button>
                <el-button type="primary" @click="save">保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'List',
    data() {
        return {
            tableData: [
                {
                    id: 1,
                    date: '2016-05-02',
                    name: '张三',
                    address: '北京',
                },
                {
                    id: 2,
                    date: '2016-05-04',
                    name: '李四',
                    address: '杭州',
                },
                {
                    id: 3,
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄',
                    children: [
                        {
                            id: 31,
                            date: '2016-05-01',
                            name: '王小虎1',
                            address: '上海市普陀区金沙江路 1519 弄',
                        },
                        {
                            id: 32,
                            date: '2016-05-01',
                            name: '王小虎2',
                            address: '上海市普陀区金沙江路 1519 弄',
                        },
                    ],
                },
            ],
            form: {},
            formVisible: false,
            editingRowIndex: -1, // 记录正在编辑的行索引
        }
    },
    created() {},
    methods: {
        handleClick(index, row) {
            this.formVisible = true
            // 深拷贝避免直接修改原数据
            this.form = JSON.parse(JSON.stringify(row))
            this.editingRowIndex = index
        },
        // 新增子项
        addChild() {
            if (!this.form.children) {
                this.$set(this.form, 'children', [])
            }

            // 生成新的子项ID（实际项目中可能需要后端生成）
            const newId = Date.now() // 简单的ID生成方式

            this.form.children.push({
                id: newId,
                date: new Date().toISOString().slice(0, 10),
                name: '',
                address: this.form.address || '',
            })
        },
        // 删除子项
        removeChild(index) {
            if (this.form.children && this.form.children.length > 0) {
                this.form.children.splice(index, 1)
            }
        },
        save() {
            if (this.editingRowIndex >= 0) {
                this.$set(
                    this.tableData,
                    this.editingRowIndex,
                    JSON.parse(JSON.stringify(this.form))
                )
                this.$message.success('保存成功')
            }
            this.formVisible = false
        },
        //关闭弹窗后的回调方法
        closeDialog() {
            this.$refs.formRef.clearValidate()
            this.editingRowIndex = -1
        },
    },
}
</script>

<style>
.demo-table-expand {
    font-size: 0;
}
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>